<!--树形菜单公共组件-->
<template>
  <div class="mod-config">
    <el-tree :data="menus" :props="defaultProps" ref="menuTree" node-key="catId" @node-click="nodeClick">
      <span class="custom-tree-node" slot-scope="{ node, data }">
        <span>{{ node.label }}</span>
      </span>
    </el-tree>
  </div>
</template>

<script>
export default {
  name: "category",
  data(){
    return{
      expandedKey: [],
      menus: [],
      defaultProps: {
        children: "children", // 子节点
        label: "name", // 显示的字段
      },
    }
  },
  watch: {},
  mounted() {
    this.getMenu();
  },
  created() {
  },
  activated() {
  },
  methods: {
    getMenu() {
      this.$http({
        url: this.$http.adornUrl("/product/category/list/tree"),
        method: "get"
      }).then(({data}) => {
        console.log("成功！", data.data);
        this.menus = data.data;
      });
    },
    /**
     * 菜单点击事件
     * @param data
     * @param node 当前节点
     * @param compoment 当前组件本身
     */
    nodeClick(data, node, compoment) {
      console.log('6666', data, node, compoment)
      // 向父组件发送事件
      this.$emit("tree-node-click", data, node, compoment)
    }
  }
}
</script>

<style scoped>

</style>
